<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>DatePicker 日期选择器</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/zh-cn.js"></script>
	<script src="../static/js/date.format.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}
.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.cell.current .text {
  background: #626aef;
  color: #fff;
}
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #f56c6c;
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
</head>
<body>
<div id="app" class="">
	<el-affix :offset="10">
		<el-button type="primary" @click="seeValue('value1')">查看value1</el-button>
		<el-button type="primary" @click="seeValue('value2')">查看value2</el-button>
		<el-button type="primary" @click="seeValue('value3')">查看value3</el-button>
		<el-button type="primary" @click="seeValue('value4')">查看value4</el-button>
		<el-button type="primary" @click="seeValue('value5')">查看value5</el-button>
		<el-button type="primary" @click="seeValue('value6')">查看value6</el-button>
		<el-button type="primary" @click="seeValue('value7')">查看value7</el-button>
		<el-button type="primary" @click="seeValue('value8')">查看value8</el-button>
		<el-button type="primary" @click="seeValue('value9')">查看value9</el-button>
		<el-button type="primary" @click="seeValue('value10')">查看value10</el-button>
		<el-button type="primary" @click="seeValue('value11')">查看value11</el-button>
		<el-button type="primary" @click="seeValue('value12')">查看value12</el-button>
		<el-button type="primary" @click="seeValue('value13')">查看value13</el-button>
		<el-button type="primary" @click="seeValue('value14')">查看value14</el-button>
	</el-affix>
	<el-divider content-position="left">选择某一天</el-divider><!-- =============================================================== -->
	<p class="desc">以”日“为基本单位，基础的日期选择控件</p>
	<p class="desc">基本单位由 type 属性指定。 通过 shortcuts 配置快捷选项， 禁用日期通过 disabledDate 设置，传入函数</p>
	<div class="demo-date-picker">
		<div class="block">
			<span class="demonstration">默认用法：</span>
			<el-date-picker v-model="value1" type="date" style="width: 120px;" placeholder="Pick a day" size="small" format="YYYY/MM/DD" value-format="YYYY-M-D"></el-date-picker>
		</div>
		<div class="block">
			<span class="demonstration">选择与快速选项：</span>
			<el-date-picker v-model="value2" type="date" placeholder="Pick a day" :disabled-date="disabledDate" :shortcuts="shortcuts"></el-date-picker>
		</div>
		<div class="block">
			<span class="demonstration">默认日期：</span>
			<el-date-picker v-model="value1_2" type="date" placeholder="Pick a day" format="YYYY-MM-DD" value-format="YYYYMMDD"></el-date-picker>
		</div>
	</div>
	
	<el-divider content-position="left">其他日期单位</el-divider><!-- =============================================================== -->
	<p class="desc">通过扩展基础的日期选择，可以选择周、月、年或多个日期</p>
	<div class="demo-date-picker">
		<div class="container">
			<div class="block">
				<span class="demonstration">Week0：</span>
				<el-date-picker v-model="week0" @change="changeTime" :picker-options="{firstDayOfWeek: 1}" type="week"
					:format="startTimeStamp + ' 至 ' + endTimeStamp" placeholder="选择周"></el-date-picker>
			</div>
			<div class="block">
				<span class="demonstration">Week：</span>
				<el-date-picker v-model="v1" type="week" format="[Week] ww" value-format="YYYY-MM-DD" placeholder="Pick a week"></el-date-picker>
			</div>
			<div class="block">
				<span class="demonstration">Month：</span>
				<el-date-picker v-model="v2" type="month" :default-value="new Date(2011, 8)" placeholder="Pick a month"></el-date-picker>
			</div>
		</div>
		<div class="container">
			<div class="block">
				<span class="demonstration">Year：</span>
				<el-date-picker v-model="v3" type="year" placeholder="Pick a year"></el-date-picker>
			</div>
			<div class="block">
				<span class="demonstration">Dates：</span>
				<el-date-picker v-model="v4" type="dates" value-format="YYYY-MM-DD" placeholder="Pick one or more dates"></el-date-picker>
			</div>
		</div>
	</div>
	<el-button type="primary" @click="seeOption1">查看所选1</el-button>
	
	<el-divider content-position="left">选择一段时间</el-divider><!-- =============================================================== -->
	<p class="desc">可在一个选择器中便捷地选择一个时间范围</p>
	<p class="desc">在选择日期范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前月份，可以使用 unlink-panels 属性解除联动</p>
	<div class="demo-date-picker">
		<div class="block">
			<span class="demonstration">----------------默认用法：</span>
			<el-date-picker v-model="value3" type="daterange" range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
		</div>
		<div class="block">
			<span class="demonstration">选择与快速选项：</span>
			<el-date-picker v-model="value4" type="daterange" unlink-panels range-separator="To" start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts"></el-date-picker>
		</div>
	</div>
	
	<el-divider content-position="left">选择月份范围</el-divider><!-- =============================================================== -->
	<p class="desc">可在一个选择器中便捷地选择一个月份范围</p>
	<p class="desc">在选择日期范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份，可以使用 unlink-panels 属性解除联动。</p>
	<div class="demo-date-picker">
		<div class="block">
			<span class="demonstration">默认用法：</span>
			<el-date-picker v-model="value5" type="monthrange" range-separator="To" start-placeholder="Start month" end-placeholder="End month"></el-date-picker>
		</div>
		<div class="block">
			<span class="demonstration">选择与快速选项：</span>
			<el-date-picker v-model="value6" type="monthrange" unlink-panels range-separator="To" start-placeholder="Start month" end-placeholder="End month" :shortcuts="shortcuts"></el-date-picker>
		</div>
	</div>
	
	<el-divider content-position="left">默认值</el-divider><!-- =============================================================== -->
	<p class="desc">日期选择器会在用户未选择任何日期的时候默认展示当天的日期。 你也可以使用 default-value 来修改这个默认的日期。 请注意该值需要是一个可以解析的 new Date() 对象</p>
	<p class="desc">如果类型是 daterange, default-value 则会设置左边窗口的默认值</p>
	<div class="demo-date-picker">
		<div class="block">
			<span class="demonstration">date：</span>
			<el-date-picker v-model="value7" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-D" placeholder="Pick a date" :default-value="new Date(1990, 8, 1)"></el-date-picker>
		</div>
		<div class="block">
			<span class="demonstration">daterange：</span>
			<el-date-picker v-model="value8" type="daterange" start-placeholder="Start Date" end-placeholder="End Date" :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"></el-date-picker>
		</div>
	</div>
	
	<el-divider content-position="left">日期格式</el-divider><!-- =============================================================== -->
	<p class="desc">使用format指定输入框的格式。 使用 value-format 指定绑定值的格式</p>
	<p class="desc">默认情况下，组件接受并返回Date对象</p>
	<p class="desc">支持的 format 参数可在文档末查看</p>
	<div class="demo-date-picker">
		<div class="block">
			<span class="demonstration">Emits Date object</span>
			<div class="demonstration">Value: {{ value9 }}</div>
			<el-date-picker v-model="value9" type="date" placeholder="Pick a Date" format="YYYY/MM/DD"></el-date-picker>
		</div>
		<div class="block">
			<span class="demonstration">Use value-format</span>
			<div class="demonstration">Value：{{ value10 }}</div>
			<el-date-picker v-model="value10" type="date" placeholder="Pick a Date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
		</div>
		<div class="block">
			<span class="demonstration">Timestamp</span>
			<div class="demonstration">Value：{{ value11 }}</div>
			<el-date-picker v-model="value11" type="date" placeholder="Pick a Date" format="YYYY/MM/DD" value-format="x"></el-date-picker>
		</div>
	</div>
	
	<el-divider content-position="left">默认显示日期</el-divider><!-- =============================================================== -->
	<p class="desc">在选择日期范围时，你可以指定起始日期和结束日期的默认时间</p>
	<p class="desc">默认情况下，开始日期和结束日期的时间部分都是选择日期当日的 00:00:00。 通过 default-time 可以分别指定开始日期和结束日期的具体时刻。 它接受最多两个日期对象的数组。 其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。</p>
	<div class="demo-date-picker">
		<div class="block">
			<p>value12：{{ value12 }}</p>
			<el-date-picker v-model="value12" type="daterange" start-placeholder="Start date" end-placeholder="End date" :default-time="defaultTime" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
		</div>
	</div>
	
	<el-divider content-position="left">设置前缀的自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">前缀内容可以被自定义</p>
	<p class="desc">当你从其他vue组件或由渲染函数生成的组件中导入组件时, 你可以设置 prefix-icon 属性来定制前缀内容</p>
	<div class="demo-date-picker">
		<div class="block">
			<span class="demonstration">set prefix-icon：</span>
			<el-date-picker v-model="value13" type="date" placeholder="Pick a day" :prefix-icon="customPrefix"></el-date-picker>
		</div>
	</div>
	
	<el-divider content-position="left">自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">弹出框的内容是可以自定义的，在插槽内你可以获取到当前单元格的数据</p>
	<div class="demo-date-picker">
		<el-date-picker v-model="value14" type="date" placeholder="Pick a day" format="YYYY/MM/DD" value-format="YYYY-MM-DD">
			<template #default="cell">
				<div class="cell" :class="{ current: cell.isCurrent }">
					<span class="text">{{ cell.text }}</span>
					<span v-if="isHoliday(cell)" class="holiday"></span>
				</div>
			</template>
		</el-date-picker>
	</div>
	
	<el-divider content-position="left">占位符 & 输出 & 详情</el-divider><!-- =============================================================== -->
	<p class="desc"><a href="https://day.js.org/docs/zh-CN/display/format">详情查看&gt;&gt;</a></p>
		占位符		输出		详情
<br>	YY			18			两位数的年份
<br>	YYYY		2018		四位数的年份
<br>	M			1-12		月份，从 1 开始
<br>	MM			01-12		月份，两位数
<br>	MMM			Jan-Dec		缩写的月份名称
<br>	MMMM		January-December	完整的月份名称
<br>	D			1-31		月份里的一天
<br>	DD			01-31		月份里的一天，两位数
<br>	d			0-6			一周中的一天，星期天是 0
<br>	dd			Su-Sa		最简写的星期几
<br>	ddd			Sun-Sat		简写的星期几
<br>	dddd		Sunday-Saturday	星期几
<br>	H			0-23		小时
<br>	HH			00-23		小时，两位数
<br>	h			1-12		小时, 12 小时制
<br>	hh			01-12		小时, 12 小时制, 两位数
<br>	m			0-59		分钟
<br>	mm			00-59		分钟，两位数
<br>	s			0-59		秒
<br>	ss			00-59		秒 两位数
<br>	SSS			000-999		毫秒 三位数
<br>	Z			+05:00		UTC 的偏移量，±HH:mm
<br>	ZZ			+0500		UTC 的偏移量，±HHmm
<br>	A			AM PM	
<br>	a			am pm	
	<el-divider content-position="right">End</el-divider><!-- =============================================================== -->
</div>
</body>
<script>

const now = new Date();
const yy = now.getFullYear();
const mm = now.getMonth() + 1 < 10 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1;
const dd = now.getDate() < 10 ? "0" + now.getDate() : now.getDate();
const yyyymmdd = String(yy) + String(mm) + String(dd);

const Main = {
	data() {
		return {
			customPrefix: Vue.h('p', 'pre'),
			msg: 'Hello Vue!!',
			holidays: [
				'2021-10-01',
				'2021-10-02',
				'2021-10-03',
				'2021-10-04',
				'2021-10-05',
				'2021-10-06',
				'2021-10-07',
			],
			value: '',
			defaultTime:[
				new Date(2000, 1, 1, 0, 0, 0),
				new Date(2000, 2, 1, 23, 59, 59),
			],
			value1: '',
			value2: '',
			value1_2: yyyymmdd,
			value3: null,
			value4: '',
			value5: '',
			value6: '',
			value7: "",
			// value7: new Date(2010, 5, 1),
			// value7: "1990-6-4",
			value8: '',
			value9: '',
			value10: '',
			value11: '',
			value12: ["2022-06-16 00:00:00", "2022-07-12 23:59:59"],
			value13: '',
			value14: '2021-10-29',
			v1: '',
			v2: '',
			v3: '',
			v4: [],
			disabledDate(time) {
				return time.getTime() > Date.now()
			},
			shortcuts: [
				{
					text: '前7天',
					value: () => {
						const end = new Date()
						const start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
						return [start, end]
					},
				},
				{
					text: '前30天',
					value: () => {
						const end = new Date()
						const start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
						return [start, end]
					},
				},
				{
					text: '后30天',
					value: () => {
						const end = new Date()
						const start = new Date()
						end.setTime(end.getTime() + 3600 * 1000 * 24 * 30)
						return [start, end]
					},
				},
				{
					text: '前90天',
					value: () => {
						const end = new Date()
						const start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
						return [start, end]
					},
				},
			],
			
			week0: '',
			startTimeStamp: '',
			endTimeStamp: '',
			searchData:{
				firstDate: '',
				lastDay: '',
			},
		}
	},
	methods:{
		changeTime(val) {
			// console.log(val);
			if(val) {
				let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
				this.startTimeStamp = this.timeFun(timeStamp + 24 * 60 * 60 * 1000); //开始时间
				this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 7); //结束时间
				console.log(this.startTimeStamp, this.endTimeStamp)
				this.searchData.firstDate = new Date(this.startTimeStamp + ' 00:00:00').getTime() //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
				this.searchData.lastDay = new Date(this.endTimeStamp + ' 23:59:59').getTime() //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
			}else{
				this.searchData.lastDay = undefined
				this.searchData.lastDay = undefined
			}
		},
		//时间戳转为yy-mm-dd hh:mm:ss
		timeFun(unixtimestamp) {
			var unixtimestamp = new Date(unixtimestamp);
			var year = 1900 + unixtimestamp.getYear();
			var month = "0" + (unixtimestamp.getMonth() + 1);
			var date = "0" + unixtimestamp.getDate();
			// var hour = "0" + unixtimestamp.getHours();
			// var minute = "0" + unixtimestamp.getMinutes();
			// var second = "0" + unixtimestamp.getSeconds();
			return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
				//     +
				//" " + hour.substring(hour.length - 2, hour.length) + ":" +
				//minute.substring(minute.length - 2, minute.length) + ":" +
				//second.substring(second.length - 2, second.length);
		},
		
		handleChange(v){
			console.log(v)
		},
		seeOption1(){
			console.log("v1：" + this.$data.v1);
			console.log("v2：" + this.$data.v2);
			console.log("v3：" + this.$data.v3);
			console.log("v4：" + this.$data.v4);
		},
		isHoliday(dayjs){
			// console.log(dayjs);
			const bool = this.$data.holidays.includes(dayjs.date.format('Y-m-d'));
			return bool;
		},
		seeValue(v){
			if(v == 'value1'){
				console.log(this.$data.value1);
			}else if(v == "value2"){
				console.log(this.$data.value2);
			}else if(v == "value3"){
				console.log(this.$data.value3);
			}else if(v == "value4"){
				console.log(this.$data.value4);
			}else if(v == "value5"){
				console.log(this.$data.value5);
			}else if(v == "value6"){
				console.log(this.$data.value6);
			}else if(v == "value7"){
				console.log(this.$data.value7);
			}else if(v == "value8"){
				console.log(this.$data.value8);
			}else if(v == "value9"){
				console.log(this.$data.value9);
			}else if(v == "value10"){
				console.log(this.$data.value10);
			}else if(v == "value11"){
				console.log(this.$data.value11);
			}else if(v == "value12"){
				console.log(this.$data.value12);
			}else if(v == "value13"){
				console.log(this.$data.value13);
			}else if(v == "value14"){
				console.log(this.$data.value14);
			}
		}
	}
}
const app = Vue.createApp(Main);
// app.use(ElementPlus);
app.use(ElementPlus, {locale: ElementPlusLocaleZhCn,});
let vm = app.mount("#app");

</script>
</html>
